<template>
  <div class="organization_box">
    <span @click="openOrganization">组织机构</span>
    <div class="organization" v-if="organizationShow">
      <h2>
        <span class="iconfont icon-zuzhijigou"></span>
        <span>组织机构</span>
        <i class="iconfont icon-guanbi" @click="organizationShow = false"></i>
      </h2>
      <div class="organization_content">
        <!-- 组织结构树状图 -->
        <div class="tree_controls">
          <h2>组织机构列表</h2>
          <div class="trees">
            <el-tree
              :data="organization.list"
              icon-class="el-icon-plus"
              highlight-current
              :default-expanded-keys="[1]"
              node-key="id"
              @node-contextmenu="treeNodeContextmenu"
              @node-click="selectBox = false"
            />
          </div>
        </div>
        <!-- 修改和添加组织机构 -->
        <div class="new_organization">
          <!-- 添加班组 -->
          <div class="add_organization" v-if="addOrganization.show">
            <h2>
              <span class="iconfont icon-tianjiajigou"></span>
              <span>添加班组</span>
            </h2>
            <div class="edit_content">
              <el-form
                ref="addOrganizationForm"
                :rules="addOrganization.rules"
                :model="addOrganization.form"
                label-width="80px"
              >
                <el-form-item prop="name" label="机构名称">
                  <el-input v-model="addOrganization.form.name"></el-input>
                </el-form-item>
                <el-form-item label="机构属性">
                  <el-input disabled v-model="addOrganization.form.attribute"></el-input>
                </el-form-item>
                <el-form-item label="上级机构">
                  <el-input disabled v-model="addOrganization.form.preName"></el-input>
                </el-form-item>
                <div class="add_btns">
                  <el-button type="primary" @click="addTeam">保 存</el-button>
                  <el-button type="success" @click="addOrganization.show = false">取 消</el-button>
                </div>
              </el-form>
            </div>
          </div>
          <!-- 编辑班组 -->
          <div class="add_organization edit_organization" v-if="editOrganization.show">
            <h2>
              <span class="iconfont icon-tianjiajigou"></span>
              <span>编辑班组</span>
            </h2>
            <div class="edit_content">
              <el-form
                ref="addOrganizationForm"
                :rules="addOrganization.rules"
                :model="editOrganization.form"
                label-width="80px"
              >
                <el-form-item prop="name" label="机构名称">
                  <el-input v-model="editOrganization.form.name"></el-input>
                </el-form-item>
                <el-form-item label="机构属性">
                  <el-input disabled value="班组"></el-input>
                </el-form-item>
                <div class="add_btns">
                  <el-button type="primary" @click="editTeam">保 存</el-button>
                  <el-button type="success" @click="editOrganization.show = false">取 消</el-button>
                </div>
              </el-form>
            </div>
          </div>
        </div>
        <div ref="selectBox" class="select_box" v-show="selectBox">
          <span @click="addNewOrganization" v-show="addShow">添加班组</span>
          <span @click="editNewOrganization" v-show="editShow">编辑班组</span>
          <span @click="deleteOrganization" v-show="editShow">删除班组</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      organizationShow: false,
      organization: {
        show: false,
        list: []
      },
      // 添加班组
      addOrganization: {
        show: false,
        addRules: {
          name: [
            { required: true, message: '请输入机构名称', trigger: 'blur' }
          ]
        },
        form: {
          name: '',
          attribute: '',
          preName: '',
          ParentNo: 0
        }
      },
      // 编辑班组
      editOrganization: {
        show: false,
        form: {
          name: '',
          clientNo: '',
          PARENT_NO: ''
        }
      },
      addShow: false,
      editShow: false,
      selectBox: false
    }
  },
  methods: {
    // 打开组织机构
    openOrganization () {
      this.organizationShow = true
      this.getOrganizationList()
    },
    // 获取组织机构列表
    async getOrganizationList () {
      this.organization.list = []
      const { data } = await this.$Http.get(`/DataListCompany/GetClientCleanerListApiNew?ClientNo=${this.$route.query.ClientNo}`)

      data.forEach(item => {
        const obj = {}
        obj.id = 1
        obj.label = item.CLIENT_NAME
        obj.children = item.cleaningTeams

        this.organization.list.push(obj)
      })

      this.organization.list = this.organization.list.filter(item => {
        item.children = item.children.filter(ele => {
          ele.label = ele.CLIENT_NAME
          ele.children = ele.teams
          delete ele.CLIENT_NAME
          delete ele.teams

          ele.children = ele.children.filter(e => {
            e.label = e.CLIENT_NAME
            delete e.CLIENT_NAME
            return e
          })
          return ele
        })
        return item
      })
    },
    // 右键树形节点
    treeNodeContextmenu (event, dataObj, node, d) {
      this.selectBox = true
      this.$refs.selectBox.style.top = event.clientY - 130 + 'px'
      this.$refs.selectBox.style.left = event.offsetX + 90 + 'px'

      if (node.level === 2) {
        this.addOrganization.form.attribute = '班组'
        this.addOrganization.form.preName = dataObj.label
        this.addOrganization.form.ParentNo = dataObj.CLIENT_NO
        this.addShow = true
        this.editShow = false
      }
      if (node.level === 3) {
        this.editShow = true
        this.addShow = false
        this.editOrganization.form.name = dataObj.label
        this.editOrganization.form.clientNo = dataObj.CLIENT_NO
        this.editOrganization.form.PARENT_NO = dataObj.PARENT_NO
      }
    },
    // 添加班组按钮
    addNewOrganization () {
      this.addOrganization.show = true
      this.addOrganization.form.name = ''
      this.editOrganization.show = false
      this.selectBox = false
    },
    // 编辑班组按钮
    editNewOrganization () {
      this.editOrganization.show = true
      this.addOrganization.show = false
      this.selectBox = false
    },
    // 编辑班组
    async editTeam () {
      if (this.editOrganization.form.name === '') {
        this.$message({
          showClose: true,
          message: '机构名称不能为空！！',
          type: 'warning'
        })
        return false
      }
      const params = {
        ClientNo: this.editOrganization.form.clientNo,
        ClientName: this.editOrganization.form.name,
        ParentNo: this.editOrganization.form.PARENT_NO,
        CreateTime: new Date().toLocaleDateString().split('/').join('-') + ' ' + new Date().toTimeString().split(' ')[0]
      }
      await this.$Http.get('/DataListCompany/UpdateTeamApi', { params })
      // 刷新树形结构
      this.getOrganizationList()
      this.editOrganization.show = false
    },
    // 删除班组
    async deleteOrganization () {
      await this.$Http.get(`/DataListCompany/DeleteTeamApi?ClientNo=${this.editOrganizationForm.clientNo}`)
      this.getOrganizationList()
      this.selectBox = false
    },
    // 添加组织机构
    async addTeam () {
      if (this.addOrganization.form.name === '') {
        this.$message({
          showClose: true,
          message: '机构名称不能为空！！',
          type: 'warning'
        })
        return false
      }
      const { data } = await this.$Http.get(`/DataListCompany/GetMaxNoApi?ClientNo=${this.addOrganization.form.ParentNo}`)
      // 新班组编号
      let newClientNo = ''
      const maxClientNo = Number(data[0].ClientNo.substr(9))
      newClientNo = maxClientNo + 1
      if (newClientNo < 10) newClientNo = '0' + newClientNo
      newClientNo = this.addOrganization.form.ParentNo + newClientNo
      // 参数
      const params = {
        ClientNo: newClientNo,
        ClientName: this.addOrganization.form.name,
        ParentNo: this.addOrganization.form.ParentNo,
        CreateTime: new Date().toLocaleDateString().split('/').join('-') + ' ' + new Date().toTimeString().split(' ')[0]
      }
      await this.$Http.get('/DataListCompany/AddTeamApi', { params })
      // 刷新树形结构
      this.getOrganizationList()
      this.addOrganization.show = false
    },
  }
}
</script>

<style scoped lang="less">
.organization_box {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 10px;
  position: relative;
  cursor: default;
  & > span:hover {
    color: #eee;
  }
  .organization {
    width: 800px;
    height: 460px;
    padding: 0;
    padding-bottom: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    position: fixed;
    left: 50%;
    top: 130px;
    transform: translateX(-50%);
    z-index: 99;
    box-shadow: 0 0 5px 3px #ccc;
    border-radius: 8px;
    h2 {
      line-height: 30px;
      border-bottom: 1px solid #ccc;
      padding-left: 10px;
      color: #666;
      span {
        margin-right: 5px;
      }
      i {
        float: right;
        margin-right: 10px;
      }
    }
    .organization_content {
      height: 428px;
      display: flex;
      .tree_controls {
        width: 200px;
        height: 388px;
        margin: 0 40px;
        margin-top: 15px;
        box-shadow: 0 0 5px 1px #ccc;
        border-radius: 6px;
        overflow: hidden;
        h2 {
          padding-left: 0;
          text-align: center;
        }
        .trees {
          height: calc(~"100% - 30px");
          overflow-y: auto;
        }
      }
      .select_box {
        position: fixed;
        width: 100px;
        z-index: 99;
        border: 1px solid #ccc;
        background-color: #fff;
        span {
          display: block;
          line-height: 26px;
          text-align: center;
          color: #333;
          &:hover {
            color: #fff;
            background-color: #409eff;
            cursor: pointer;
          }
        }
      }
      .new_organization {
        flex: 1;
        height: 100%;
        position: relative;
        .add_organization {
          width: 300px;
          height: 246px;
          background-color: #fff;
          box-shadow: 0 0 5px 1px #ccc;
          border-radius: 6px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          .edit_content {
            .el-form {
              width: 70%;
              margin: 20px auto;
              .add_btns {
                margin-top: 30px;
                display: flex;
                justify-content: center;
                .el-button {
                  padding-left: 4px;
                  /deep/span {
                    margin-left: 0;
                    padding: 0 5px;
                  }
                  &:first-child {
                    margin-right: 20px;
                  }
                }
              }
            }
          }
        }
        .edit_organization {
          height: 200px;
        }
      }
    }
  }
}
</style>